<template>
  <div class="content">
    <div class="list" @scroll="scrollEvent">
      <div class="listCon">
        <div class="header">
          <div class="header_l">
            <div class="header_l_l">
              <img :src="userHead" alt="">
            </div>
            <div class="header_l_r">
              <div class="userName">
                {{userName}}（{{userDep}}）
              </div>
              <div class="lessonName" v-if="partName">
                {{className}}-{{classPartName}}{{"-"+partName}}
              </div>
              <div class="lessonName" v-if="!partName">
                {{className}}-{{classPartName}}
              </div>
            </div>
          </div>
          <div class="header_r">
            <!-- <span>乔好难</span><span class="share">的分享</span> -->
            <div>{{buWho}}</div>
            <div class="share">的分享</div>
          </div>
        </div>
        <div class="body">
          <div class="bodyTop">
            <!-- 图片 -->
            <div v-if="type == '手写教案'">
              <img :src="item" v-for="(item, index) in imgList" :key="index" alt="" @click="preImg(index)">
            </div>
            <!-- 视频 -->
            <div class="videoList" v-if="type == '备课视频' || type == '精彩视频'">
              <img src="/img/videoTask/videoListImg.png" alt="" v-for="(item, index) in imgList" :key="index" @click="preVideo(item)">
            </div>
          </div>
          <div class="bodyBottom">
            <div class="date">
              {{createTime.slice(0,10)}}
            </div>
            <div class="bottom_r">
              <!-- <img :src="zanImg" alt="" @click="dianZan"> -->
              <img src="/img/circle/pinglun.png" @click="toComs(userName)" alt="">
            </div>
          </div>
        </div>
        <div class="half_line half_lined">

        </div>
        <div class="footer">
          <!-- 评论区 -->
          <div class="comments">
            <!-- 点赞人员 -->
            <div class="zanGroup">
              <img src="/img/circle/likePeople.png" alt="">
              <!-- <span v-for="(item, index) in icrobotDianzans" :key="index">{{item.username}}</span> -->
              <span v-for="(item, index) in icrobotDianzans" :key="index" v-if="index < 8">{{item.username}}</span>
              <span v-if="icrobotDianzans.length > 8">...</span>
              <span class="morePeople" v-if="icrobotDianzans.length > 8">等{{icrobotDianzans.length}}人觉得很赞！</span>
              <!-- <span class="morePeople">等{{icrobotDianzans.length}}人觉得很赞！</span> -->
            </div>
            <div class="commentsArea" v-if="comsList.length>0">
              <!-- 回复型评论 -->
              <div class="indirectCom" v-for="(item, index) in comsList" :key="index">
                <span @click="comsToPeople(item)">{{item.fromUsername}}</span>
                <span class="huifu" v-if="item.toUsername">回复</span>
                <span>{{item.toUsername}}：</span>
                <span class="comInfos">{{item.commentContent}}</span>
              </div>
            </div>
            <!-- 无评论时 -->
            <div class="haveNoComs" v-if="comsList.length<=0">
              <img src="/img/circle/wu.png" style="width:1.66rem;height:1.21rem;" alt="">
              <div>暂无评论</div>
            </div>
          </div>
        </div>
        <div class="half_line" v-if="comsList.length>0">

        </div>
        <div class="endTips" v-if="comsList.length>0">
          已加载全部评论
        </div>
      </div>
    </div>
    <footer v-if="comFlag">
      <input v-model="comValue" type="text" autofocus :placeholder="placeholder" style="width: 82%;">
      <!-- <span class="sendImg" @click="sendComs">发送</span> -->
      <van-button type="info" size="small" style="margin-left: 0.26rem;" @click="sendComs">发送</van-button>
    </footer>
    <!-- 视频预览 -->
    <div v-if="videoShow" @click="cancelVideo" class="videoMask">
      <div class="wrapper">
        <div>
          <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions">
          </video-player>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      placeholder: "写评论",
      images: [],
      zanImg: "/img/circle/zan.png",
      // 控制点赞开关
      zanFalg: false,
      // 评论框
      comValue: "",
      comFlag: false,
      // 传递的数据
      imgList: [],
      userHead: "",
      userName: "",
      userDep: "",
      buWho: "",
      className: "",
      classPartName: "",
      createTime: "",
      taskId: "",
      renWuType: "",
      toUid: "",
      toUsername: "",
      id: "",
      comsList: [],
      icrobotDianzans: [],
      type: "",
      partName: "",
      // 视频
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //倍速控制
        autoplay: false, //是否自动播放
        muted: false, //是否静音播放
        loop: false, //是否循环播放
        preload: "auto",
        language: "zh-CN", //语言，还要引入对应的文件
        aspectRatio: "16:9", //比例
        fluid: true,
        sources: [
          {
            type: "",
            src: "", //url地址
          },
        ],
        poster: "", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
        controlBar: {
          timeDivider: true,
          durationDisplay: true, //剩余时间是否显示
          remainingTimeDisplay: false, //剩余时间是否显示，有一个即可
          fullscreenToggle: true, //全屏按钮
        },
      },
      videoShow: false,
      importantId: "",
    };
  },
  mounted() {
    if (this.$route.query.from == "列表") {
      this.partName = this.$route.query.partName;
      this.type = this.$route.query.type;
      this.userHead = this.$route.query.userHead;
      this.userName = this.$route.query.userName;
      this.userDep = this.$route.query.userDep;
      this.buWho = this.$route.query.buWho;
      this.className = this.$route.query.className;
      this.classPartName = this.$route.query.classPartName;
      this.createTime = this.$route.query.createTime;
      this.taskId = this.$route.query.taskId;
      this.renWuType = this.$route.query.renWuType;
      this.imgList = this.$route.query.imgList.map(
        (item) => "http://niu.icrobot.cn/" + item
      );
      this.icrobotDianzans = this.$route.query.icrobotDianzans;
      for (var i = 0; i < this.icrobotDianzans.length; i++) {
        this.icrobotDianzans[i].username =
          this.icrobotDianzans[i].username + "、";
        this.icrobotDianzans[
          this.icrobotDianzans.length - 1
        ].username = this.icrobotDianzans[
          this.icrobotDianzans.length - 1
        ].username.split("、")[0];
      }
      this.queryApproveComment();
    } else if (this.$route.query.from == "与我相关") {
      this.taskId = this.$route.query.taskId;
      this.relatedToMe();
    }
  },
  methods: {
    // 与我相关查询页面详情
    relatedToMe() {
      (async () => {
        const { data } = await this.get("/approve/pointToMe", {
          taskId: this.taskId,
        });
        this.userHead = data.userFileVo.userHead;
        this.userName = data.userFileVo.submitUsername;
        this.userDep = data.userFileVo.fenxiangUserdep;
        this.className = data.userFileVo.className;
        this.classPartName = data.userFileVo.classPartName;
        this.partName = data.userFileVo.partName;
        this.buWho = data.userFileVo.fenxiangUsername;
        this.type = data.userFileVo.renwuType;
        // 图片  视频
        this.imgList = data.userFileVo.videoFile
          .split("*")
          .map((item) => "http://niu.icrobot.cn/" + item);
        this.createTime = data.userFileVo.createTime;
        // 点赞数据
        this.icrobotDianzans = data.icrobotDianzans;
        for (var i = 0; i < this.icrobotDianzans.length; i++) {
          this.icrobotDianzans[i].username =
            this.icrobotDianzans[i].username + "、";
          this.icrobotDianzans[
            this.icrobotDianzans.length - 1
          ].username = this.icrobotDianzans[
            this.icrobotDianzans.length - 1
          ].username.split("、")[0];
        }
        // 评论数据
        this.comsList = data.commentReplies;
        // 调用回复某人的方法  传入某人回复的具体一条信息
        this.importantId = this.$route.query.importantId;
        for (var i = 0; i < this.comsList.length; i++) {
          if (this.importantId == this.comsList[i].id) {
            this.comsToPeople(this.comsList[i]);
          }
        }
      })();
    },
    // 到个人中心页面
    // toPersonal() {
    //   this.$router.push("/Personal");
    // },
    // 预览图片
    preImg(index) {
      ImagePreview({
        images: this.imgList,
        startPosition: index,
        onClose() {
          // do something
        },
      });
    },
    // 评论
    toComs(name) {
      // if (name == localStorage.getItem("userName")) {
      //   this.$toast.fail("不能评论自己的内容");
      // } else {
      this.comFlag = true;
      this.placeholder = "写评论";
      this.toUid = "";
      this.toUsername = "";
      this.id = "";
      // }
    },
    // 发送评论
    sendComs() {
      if (this.comValue == "") {
        this.$toast.fail("评论内容不能为空");
        return;
      } else {
        (async () => {
          const data = await this.get("/approve/approveComment", {
            taskId: this.taskId,
            taskType: this.renWuType,
            commentContent: this.comValue,
            fromUid: localStorage.getItem("id"),
            toUid: this.toUid,
            fromUsername: localStorage.getItem("userName"),
            toUsername: this.toUsername,
            id: this.id,
          });
          if (data.code == 200) {
            this.comValue = "";
            this.comFlag = false;

            this.$toast.success(data.msg);
          } else {
            this.$toast.fail(data.msg);
          }
          this.queryApproveComment();
        })();
      }
    },
    // 评论查询接口
    queryApproveComment() {
      (async () => {
        const data = await this.get("/approve/queryGiveLike", {
          taskId: this.taskId,
        });
        this.comsList = data.data;
      })();
    },
    // 回复某人
    comsToPeople(val) {
      if (val.fromUid == localStorage.getItem("id")) {
        this.$toast.fail("不能对自己进行回复");
      } else {
        this.comFlag = true;
        this.placeholder = `回复 ${val.fromUsername} `;
        this.toUid = val.fromUid;
        this.toUsername = val.fromUsername;
        this.id = val.id;
      }
    },
    // 监听页面滚动
    scrollEvent() {
      this.comFlag = false;
    },
    // 预览视频
    preVideo(item) {
      this.playerOptions.sources[0].src = item;
      this.$toast.loading({
        message: "加载中",
        duration: 500,
        onClose: () => {
          this.videoShow = true;
        },
      });
    },
    cancelVideo() {
      this.videoShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.sendImg {
  font-size: 0.24rem;
  font-weight: bolder;
  font-family: PingFang SC;
  font-weight: 400;
  color: #299bff;
  margin-left: 0.15rem;
}
// 视频预览遮罩
.videoMask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    div {
      width: 100%;
    }
  }
}
// 视频列表图片展示
.videoList {
  width: 6rem;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.31rem;
  img {
    width: 0.94rem;
    height: 0.94rem;
    margin-right: 0.2rem;
    margin-top: 0.2rem;
  }
}
.haveNoComs {
  text-align: center;
  img {
    vertical-align: middle;
    margin-top: 0.46rem;
  }
  div {
    font-size: 0.28rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #c7c7c7;
    line-height: 0.28rem;
    margin-top: 0.46rem;
  }
}
.content {
  width: 100%;
  min-height: 100%;
  background-color: #f7f9fa;
  .list {
    box-sizing: border-box;
    .listCon {
      padding: 0 0.24rem 0.24rem;
      border-top: 1px solid #ededed;
      margin-bottom: 0.24rem;
      .header {
        display: flex;
        // align-items: center;
        justify-content: space-between;
        .header_l {
          display: flex;
          align-items: center;
          .header_l_l {
            img {
              width: 0.72rem;
              height: 0.72rem;
              border-radius: 50%;
            }
          }
          .header_l_r {
            margin-left: 0.17rem;
            .userName {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: bold;
              color: #333333;
              width: 4.4rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .lessonName {
              font-size: 0.22rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: #f9732a;
              margin-top: 0.09rem;
            }
          }
        }
        .header_r {
          display: flex;
          margin-top: 0.15rem;
          div {
            font-size: 0.2rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #2d9dff;
          }
          .share {
            color: #333333;
            margin-left: 0.08rem;
          }
        }
      }
      .body {
        .bodyTop {
          margin-left: 0.65rem;
          //   width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          img {
            width: 1.44rem;
            height: 1.44rem;
            border-radius: 0.06rem;
            margin-right: 0.16rem;
            margin-bottom: 0.16rem;
          }
        }
        .bodyTop img:nth-child(4n) {
          margin-right: 0;
        }
        .bodyTop img:last-child {
          margin-right: 0;
        }
        .bodyBottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 0.65rem;
          .date {
            font-size: 0.2rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #7e7e7e;
          }
          .bottom_r {
            display: flex;
            align-items: center;
          }
          .bottom_r img:first-child {
            width: 0.31rem;
            height: 0.33rem;
          }
          .bottom_r img:last-child {
            width: 0.34rem;
            height: 0.29rem;
            margin-left: 0.29rem;
          }
        }
      }
      .half_line {
        width: 7.02rem;
        height: 1px;
        background: #ededed;
        margin: 0.2rem 0;
      }
      .footer {
        margin-left: 0.65rem;
        .comments {
          .zanGroup {
            font-size: 0.1rem;
            // line-height: 0.4rem;
            img {
              width: 0.26rem;
              height: 0.26rem;
              margin-right: 0.08rem;
            }
            span {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: #0666ba;
              margin-bottom: 0.16rem;
            }
            .morePeople {
              margin-left: 0.08rem;
            }
          }
          .commentsArea {
            margin-top: 0.16rem;
            .directCom {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: #0666ba;
              span {
                margin-bottom: 0.12rem;
              }
              .comInfos {
                color: #333333;
              }
            }
            .indirectCom {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: #0666ba;
              span {
                margin-bottom: 0.12rem;
              }
              .huifu {
                margin: 0 0.08rem;
              }
              .comInfos {
                color: #333333;
              }
            }
          }
        }
      }
      .half_lined {
        margin-bottom: 0.32rem;
      }
      .endTips {
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #7e7e7e;
        text-align: center;
      }
    }
  }
  // 评论框
  footer {
    width: 100%;
    padding: 0.17rem 0.24rem;
    box-sizing: border-box;
    align-items: center;
    display: flex;
    border-top: 1px solid #eee;
    background: white;
    position: fixed;
    bottom: 0;
    left: 0;
    input {
      width: 6.36rem;
      background: #ffffff;
      border: 1px solid #afafaf;
      border-radius: 0.08rem;
      padding: 0.15rem;
      box-sizing: border-box;
      font-size: 0.26rem;
    }
    img {
      width: 0.4rem;
      height: 0.36rem;
      margin-left: 0.25rem;
    }
  }
}
</style>